<template>
  <div>
    <div class="navbar-div">
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="goods-images">
      <van-image :src="goodsInfo.IMAGE1" width="50%" />
    </div>
    <div class="goods-name">{{ goodsInfo.NAME }}</div>
    <div class="goods-price">￥{{ moneyFilter(goodsInfo.PRESENT_PRICE) }}</div>
    <div>
      <van-tabs swipeable sticky>
        <van-tab title="商品详情">
          <div class="detail" v-html="goodsInfo.DETAIL"></div>
        </van-tab>
        <van-tab title="评价">
          <div style="min-height:100vh">正在制作中 </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
  <div class="goods-bottom">
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="cartCount"
        @click="handleToCart"
      />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="addGoodsToCart"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { Toast } from 'vant'
import { getDetailGoodsInfo } from '../api/goods.js'
import { toMoney } from '../filter/moneyFilter'
export default defineComponent({
  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const goodsId = ref('')
    const cartCount = computed(() => store.getters.cartInfo.length)
    const onClickLeft = () => {
      router.back()
    }
    const goodsInfo = ref({})
    const moneyFilter = (money) => {
      return toMoney(money)
    }
    const addGoodsToCart = () => {
      if (store.getters.cartInfo.length === 0) {
        store.dispatch('cart/addGoodsToCart', goodsInfo.value)
        Toast.success('添加成功')
      } else {
        let isHaveGoods = store.getters.cartInfo.find(
          (cart) => cart.goodsId == goodsId.value
        )
        if (!isHaveGoods) {
          store.dispatch('cart/addGoodsToCart', goodsInfo.value)
          Toast.success('添加成功')
        } else {
          Toast.success('已有此商品')
        }
      }
    }
    const handleToCart = () => {
      router.push('/cart')
    }
    onMounted(() => {
      goodsId.value = route.query.goodsId
        ? route.query.goodsId
        : route.params.goodsId
      getDetailGoodsInfo({ goodsId: goodsId.value }).then((res) => {
        if (res.code === 200 && res.data) {
          goodsInfo.value = res.data
        } else {
          Toast.fail('服务器错误,获取数据失败')
        }
      })
    })
    return {
      onClickLeft,
      goodsInfo,
      moneyFilter,
      addGoodsToCart,
      cartCount,
      handleToCart
    }
  }
})
</script>
<style lang="scss" scoped>
.detail {
  font-size: 0px;
  margin-bottom: 60px;
}
.goods-images {
  padding: 20px;
}
.goods-name {
  background-color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 10px 10px;
  border-top: 10px solid #efefef;
}
.goods-price {
  background-color: #fff;
  color: red;
  text-align: left;
  padding: 10px 10px;
  border-bottom: 10px solid #efefef;
}
.goods-bottom {
  position: fixed;
  bottom: 0px;
  left: 0px;
  background-color: #fff;
  width: 100%;

  display: flex;
  flex-direction: row;
  flex-flow: nowrap;
}
.goods-bottom > div {
  flex: 1;
  padding: 5px;
}
</style>